<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button @click="$router.push('/search')" icon="search" type="primary">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <!-- 文章列表 -->
        <article-list :channel_id="item.id"></article-list>
      </van-tab>

      <div class="icon-box" @click="channelShow = true">
        <van-icon name="wap-nav" />
      </div>
    </van-tabs>

    <!-- 频道管理 -->
    <!-- <ChannelManage :show="channelShow" @update:show="channelShow = $event"/> -->

    <!-- 
        .sync修饰符就是一个语法糖
          当你对show加了.sync，他就能生成 @update:show="show绑定的值 = $event"
          像这个例子中：show绑定的值是 channelShow
          所以他会帮你生成 @update:show="channelShow = $event"

        v-model其实也是一个语法糖
          你写 v-model="数据" 其实相当于帮你生成了
            :value="数据" 以及 @input="数据 = $event"
          例如这里
              v-model="active"
          那相当于帮你生成了 :value="active"  @input="active = $event"
    -->
    <ChannelManage
      :show.sync="channelShow"
      :ownList="ownList"
      :allList="allList"
      v-model="active"
    />
  </div>
</template>

<script>
// 导入组件
import ArticleList from "./ArticleList.vue";
import ChannelManage from "./ChannelManage.vue";
// 导入接口
import { ownChannelAPI, allChannelAPI } from "@/api/channel.js";
export default {
  name: "home",
  components: {
    ArticleList,
    ChannelManage,
  },
  data() {
    return {
      ownList: [],
      allList: [],
      // 控制频道管理的显示和隐藏
      channelShow: false,
      active: 0,
    };
  },
  async created() {
    // 先获取本地存储
    const local = JSON.parse(window.localStorage.getItem("channel86"));
    // 如果登录了或者本地存储没数据
    if (this.$store.state.tokenObj.token || !local) {

      // 1. 请求我的频道
      const res = await ownChannelAPI();
      this.ownList = res.data.channels;

    } else {

        // 没登录而且本地存储有数据
        // 那就读取出来作为我的频道数组
        this.ownList = local;
    }

    // 2. 请求所有频道
    const res2 = await allChannelAPI();
    this.allList = res2.data.channels;
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  .logo {
    width: 120px;
    height: 50px;
    // 脚手架4：是不支持直接在样式里写 @ 代表src，脚手架4可以在@加~ 也就是写成 ~@ 就可以了
    // 脚手架5：支持了
    background: url(@/assets/logo.png) no-repeat center / contain;
  }

  .van-button {
    width: 100px;
    height: 30px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    .van-icon-search {
      color: #fff;
    }
  }
}

.van-tabs {
  ::v-deep .van-tabs__wrap {
    width: 340px;
  }

  .icon-box {
    width: 35px;
    height: 35px;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 5px;

    .van-icon {
      font-size: 35px;
    }
  }
}
</style>